<template>
  <div class="chart-container">
    <Component :is="componentMap[props.option.type]" :option="props.option" autoresize></Component>
  </div>

</template>

<script setup>
import BarComponent from "./components/BarComponent.vue";
import PieComponent from "./components/PieComponent.vue"
import LineComponent from "./components/LineComponent.vue";
import RadarComponent from "./components/RadarComponent.vue";

import {watch,markRaw} from "vue";

const props = defineProps({
  option: {
    type:Object,
    default:(()=>{})
  }
})


const componentMap = {
  'bar':markRaw(BarComponent),
  'pie':markRaw(PieComponent),
  'line':markRaw(LineComponent),
  'radar':markRaw(RadarComponent)
}

watch(()=>props.option,val=>{
  console.log(val)
},{immediate:true})
</script>


<style>
.chart-container{
  height: 300px;
}
</style>